<template>
  <div class="filter-container">
    <el-row :gutter="10" style="margin-top:5px;">
      <el-col :span="4">
        <el-input
          v-model="listQuery.search"
          placeholder="模糊搜索"
          clearable
          size="small"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        > <i slot="prefix" class="el-input__icon el-icon-search" /></el-input>
      </el-col>
      <el-col :span="4">
        <el-input
          v-model="listQuery.ip"
          placeholder="精确IP搜索"
          clearable
          size="small"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        > <i slot="prefix" class="el-input__icon el-icon-search" /></el-input>
      </el-col>
      <el-col :span="8">
        <el-button-group>
          <el-button class="filter-item" size="small" type="primary" icon="el-icon-search" @click="handleFilter">
            搜索
          </el-button>
          <el-button v-if="checkPermission(['admin','server_create','server_all'])" class="filter-item" size="small" type="primary" icon="el-icon-edit" @click="handleCreate">
            新增
          </el-button>
          <el-button v-if="checkPermission(['admin','server_delete','server_all'])" size="small" class="filter-item" type="danger" icon="el-icon-delete" @click="handleSelectDel">
            批量删除
          </el-button>
        </el-button-group>
      </el-col>
      <el-col :span="4" :offset="4">
        <el-button-group>
          <el-tooltip content="支持先筛选后再导出哦">
            <el-button size="small" :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
              导出
            </el-button>
          </el-tooltip>
          <el-button size="small" class="filter-item" type="primary" icon="el-icon-upload" @click="handleUpload">
            导入
          </el-button>
        </el-button-group>
      </el-col>
    </el-row>
    <el-row :gutter="12">
      <el-col :span="4">
        <el-select v-model="tagsSelect" multiple class="filter-item" clearable size="small" placeholder="请选择标签" @change="handleTagsFilter">
          <el-option
            v-for="item in tagsList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="serverTypeSelect" class="filter-item" clearable size="small" placeholder="请选择服务器类型" @change="handleTypeFilter">
          <el-option
            v-for="item in serverTypeDict"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="deviceTypeSelect" class="filter-item" clearable size="small" placeholder="请选择设备类型" @change="handleDeviceTypeFilter">
          <el-option
            v-for="item in deviceTypeDict"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="assetsStatusSelect" class="filter-item" clearable size="small" placeholder="请选择设备状态" @change="handleStatusFilter">
          <el-option
            v-for="item in assetsStatusDict"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="idcSelect" class="filter-item" clearable size="small" placeholder="请选择所在机房" @change="handleIdcFilter">
          <el-option
            v-for="item in idcList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-button class="filter-item" size="small" type="info" icon="el-icon-refresh" @click="handleRefresh">清空</el-button>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import checkPermission from '@/utils/permission'
import { parseTime } from '@/utils'
export default {
  props: {
    listQuery: {
      type: Object,
      default: () => {
        return {
        }
      }
    },
    tagsList: {
      type: Array,
      required: true
    },
    serverTypeDict: {
      type: Array,
      required: true
    },
    deviceTypeDict: {
      type: Array,
      required: true
    },
    assetsStatusDict: {
      type: Array,
      required: true
    },
    idcList: {
      type: Array,
      required: true
    },
    list: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      serverTypeSelect: '',
      tagsSelect: '',
      deviceTypeSelect: '',
      assetsStatusSelect: '',
      idcSelect: '',
      downloadLoading: false,
      query: {
        limit: ''
      }
    }
  },
  methods: {
    checkPermission,
    handleSelectDel() {
      const selected = this.$parent.multipleSelection
      if (selected == null || selected.length === 0) {
        this.$message('你还没有勾选任何数据')
        return
      }
      const count = selected.length
      this.$confirm('此操作将删除' + count + '条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$parent.handleSelectionDel()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleFilter() {
      this.$emit('filter')
    },
    handleCreate() {
      this.$emit('create')
    },
    handleUpload() {
      this.$router.push({
        path: '/assets/server/upload',
        query: { type: 'server' }
      })
    },
    handleIdcFilter() {
      this.listQuery.idc = this.idcSelect
      this.$emit('filter')
    },
    handleTypeFilter() {
      this.listQuery.type = this.serverTypeSelect
      this.$emit('filter')
    },
    handleTagsFilter() {
      this.listQuery.tags = this.tagsSelect
      this.$emit('filter')
    },
    handleDeviceTypeFilter() {
      this.listQuery.device_type = this.deviceTypeSelect
      this.$emit('filter')
    },
    handleStatusFilter() {
      this.listQuery.status = this.assetsStatusSelect
      this.$emit('filter')
    },
    handleRefresh() {
      for (const key in this.listQuery) {
        delete this.listQuery[key]
      }
      this.idcSelect = ''
      this.deviceTypeSelect = ''
      this.serverTypeSelect = ''
      this.assetsStatusSelect = ''
      this.$emit('filter')
    },
    handleDownload() {
      this.downloadLoading = true
      this.$confirm('你可以设置表格页数(如999/页)以展示页数以导出更多数据', '提示', {
        confirmButtonText: '确定导出',
        cancelButtonText: '取消'
      }).then(() => {
        this.$emit('exportLimit')
        import('@/vendor/Export2Excel').then(excel => {
          const tHeader = ['id', '服务器IP', '其他IP', '管理IP', '应用', '服务架构', '应用环境', '认证类型', '用户名', '密码', '端口', '品牌', '型号', '系统类型', '系统版本', '安全域', '上架日期', '维保日期', '服务器类型', '资产状态', '资产SN', '设备类型', '机柜', '备注', 'idc', '标签']
          const filterVal = ['id', 'ip', 'other_ip', 'management_ip', 'app', 'app_desc', 'app_env', 'auth_type', 'username', 'password', 'port', 'brand', 'model', 'os_type', 'os_version', 'security_domain', 'shelves_date', 'maintenance_date', 'type', 'status', 'sn', 'device_type', 'cabinet', 'remarks', 'idc', 'tags']
          const data = this.formatJson(filterVal, this.list)
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: 'ServerList'
          })
        })
        this.$message({
          type: 'success',
          message: '导出成功!'
        })
      })
      this.downloadLoading = false
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        if (j === 'timestamp') {
          return parseTime(v[j])
        } else if (j === 'idc') {
          if (v[j] !== null) {
            return (v[j].name)
          }
        } else if (j === 'tags') {
          if (v[j] !== null) {
            const temp = []
            for (const z of v[j]) {
              temp.push(z.name)
            }
            return temp
          }
        } else {
          return v[j]
        }
      }))
    }
  }
}
</script>

